<template>
  <view>
    <u-navbar title="设备统计" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
      <view class="h-80 flex align-center p-lr-40 bg-fff oh">
        <view class="max-w-163 oh" v-if="isAdminRole">
          <DropDownSelect placeholder="选择医院" :list="hospitalOption" valueKey="hospitalId" @confirm="hospitalConfirm" />
        </view>
        <!-- <view class="max-w-163 oh" v-if="!isAdminRole">
          <DropDownSelect placeholder="选择公司" :list="companyOption" valueKey="hospitalId" @confirm="companyConfirm" />
        </view> -->
        <view class="max-w-163 oh" >
          <DropDownSelect placeholder="设备类型" :list="deviceTypeOption" valueKey="paramId" @confirm="deviceTypeConfirm" label="paramName" />
        </view>
        <view class="flex align-center justify-end flex1">
          <DateTimePicker @unitChange="unitChange" @dateChange="dateChange" :disableUnitType="['day', 'week']" />
        </view>
      </view>
    </view>
    <view class="m-lr-20 pb-50 oys">
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" v-for="(item, index) in dataList" :key="index"
        @tap.stop="toOrderDetail(item)">
        <view class="flex align-center justify-between">
          <text class="fz-40 font-bold">{{ item.deviceName || '-' }}
            <text class="color-CCCCCC fz-22 pl-20">设备编号：{{ item.deviceNo || '-' }}</text>
          </text>
          <image class="w-14 h-28 ml-20 min-w-14" src="@/static/images/common/toPath.png"></image>
        </view>
        <view class="flex mt-25">
          <view class="h-36 tagMin">
            <text class="tag p-tb-8 p-lr-16 fz-18 br-8">
              {{ item.categoryName || '-' }}
            </text>
          </view>
        </view>

        <view class="flex align-center justify-around mt-26 pb-10">
          <view class="text-center">
            <view class="color-888888">巡检</view>
            <view class="mt-20">{{ item.inspectionCount || 0}}</view>
          </view>
          <u-line color="#CCC" direction="col" length="50" />
          <view class="text-center">
            <view class="color-888888">保养</view>
            <view class="mt-20">{{ item.maintenanceCount || 0}}</view>
          </view>
          <u-line color="#CCC" direction="col" length="50" />
          <view class="text-center">
            <view class="color-888888">维修</view>
            <view class="mt-20">{{ item.repairCount || 0}}</view>
          </view>
        </view>
      </view>

    </view>

    <EmptyIcon v-if="!loading && dataList.length === 0" />
  </view>
</template>

<script>
import DropDownSelect from "./components/dropDownSelect"
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DateTimePicker from "./components/dateTimePicker";

import { optionParam } from "@/api/basic/param"
import { optionHospitalForCompany } from "@/api/hospital/hospital"

import { getDeviceList } from "@/api/statistics/device"
import getNavBarHeight from "@/mixins/getNavBarHeight";

export default {
  name: "DeviceStatistics",
  mixins: [getNavBarHeight],
  components: { EmptyIcon, DropDownSelect, DateTimePicker },
  created () {
    this.queryParams.year = new Date().getFullYear()
    this.getDeviceParamOption()
    const companyId = this.$store.getters.companyId !== -1 ? this.$store.getters.companyId : ""
    if (this.$auth.hasRoleOr(['co-admin','admin'])) {
      this.isAdminRole = true
      this.queryParams.companyId = companyId
    } else if (this.$auth.hasRole('manager')) {
      this.isAdminRole = false
      this.queryParams.hospitalId = this.$store.getters.curHospitalId !== -1 ? this.$store.getters.curHospitalId : ""
      this.queryParams.companyId = companyId
    }
    this.getHospitalOption()
    this.init()
  },
  data () {
    return {
      hospitalOption: [],
      deviceTypeOption: [],
      companyOption: [],
      dataList: [],
      queryParams: {
        hospitalId: '',
        paramId: '',
        companyId: '',
        year: '',
        month: '',
        day: '',
        week: '',
        unitType: 0,
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      hasNext: true,
      //是否是管理员角色
      isAdminRole: false,
    }
  },
  onReachBottom () {
    if (!this.loading && this.hasNext) {
      this.getNextList()
    }
  },
  methods: {
    init () {
      this.queryParams.pageNum = 1
      this.loading = true
      getDeviceList(this.queryParams).then(res => {
        this.dataList = res.rows || []
        this.hasNext = res.hasNext || false
      }).finally(() => this.loading = false)
    },
    getNextList () {
      this.loading = true
      const params = { ...this.queryParams, pageNum: this.queryParams.pageNum + 1 }
      getDeviceList(params).then(res => {
        this.queryParams.pageNum++
        this.dataList = this.dataList.concat(res.rows)
        this.hasNext = res.hasNext
      }).finally(() => {
        this.loading = false
      })
    },
    //根据公司ID查医院--管理员角色
    getHospitalOption () {
      optionHospitalForCompany(this.queryParams.companyId).then(res => {
        this.hospitalOption = res.data
      })
    },
    // getCompanyOption () {
    //   this.companyOption = []
    // },
    //设备类型下拉
    getDeviceParamOption () {
      this.deviceTypeOption = []
      optionParam({ paramType: 'hosp_device_category'}).then(res => {
        this.deviceTypeOption = res.data
      })
    },
    //医院选择回调
    hospitalConfirm (id) {
      this.queryParams.hospitalId = id
      this.init()
    },
    // companyConfirm (id) {
    //   this.queryParams.companyId = id
    // },
    //设备类型选择回调
    deviceTypeConfirm (id) {
      this.queryParams.paramId = id
      this.init()
    },
    toOrderDetail (item) {
      const queryParams = {
        deviceId: item.deviceId,
        categoryName: item.categoryName,
        deviceName: item.deviceName,
        deviceNo: item.deviceNo,
        year: this.queryParams.year,
        month: this.queryParams.month,
        week: this.queryParams.week,
        day: this.queryParams.day,
        unitType: this.queryParams.unitType
      }
      this.$tab.navigateTo(`/pages/statistics/device-order-detail?queryParams=${encodeURIComponent(JSON.stringify(queryParams))}`)
    },
    //日期单位变更
    unitChange (unit) {
      this.queryParams.unitType = unit
      // this.init()
    },
    //日期变更
    dateChange (dateObj) {
      this.queryParams.year = dateObj.year
      this.queryParams.month = dateObj.month
      this.queryParams.day = dateObj.day
      this.queryParams.week = dateObj.week
      this.init()
    },
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
.tag {
  border: 1px solid #409EFF;
  color: #2D8CF0;
  letter-spacing: 1px;
}

.tagMin {
  transform: scale(.9);
}
</style>
